<script setup></script>

<template>
  <div class="body">
    <h2>基础组件</h2>
    <p><strong>Text</strong> - 用于显示文本。</p>
    <pre><code>Text('这是一段文本')</code></pre>

    <p><strong>Image</strong> - 用于显示图片。</p>
    <pre><code>Image($rawfile('path/to/image.png'))</code></pre>

    <p><strong>Button</strong> - 按钮组件。</p>
    <pre><code>Button('点击我').onClick(() => {
    console.log('按钮被点击了');
})</code></pre>

    <p><strong>Input</strong> - 输入框组件。</p>
    <pre><code>Input({placeholder: '请输入文字'})
    .onChange((value) => {
        console.log('输入内容：', value);
    })</code></pre>

    <p><strong>Progress</strong> - 进度条组件。</p>
    <pre><code>Progress({value: 50}) // 50%的进度</code></pre>

    <h2>容器组件</h2>
    <p><strong>List</strong> - 列表容器。</p>
    <pre><code>List() {
    ForEach(['苹果', '香蕉', '橙子'], (item, index) => {
        ListItem() {
            Text(item)
        }
    })
}</code></pre>

    <p><strong>Grid</strong> - 网格布局容器。</p>
    <pre><code>Grid({columns: 3}) {
    GridItem() {
        Text('Grid 1')
    }
    GridItem() {
        Text('Grid 2')
    }
    GridItem() {
        Text('Grid 3')
    }
}</code></pre>

    <p><strong>Row</strong> - 行容器。</p>
    <pre><code>Row() {
    Text('这是一个文本')
    Button('这是一个按钮')
}</code></pre>

    <p><strong>Column</strong> - 列容器。</p>
    <pre><code>Column() {
    Text('这是一个文本')
    Button('这是一个按钮')
}</code></pre>

    <p><strong>Stack</strong> - 堆叠容器。</p>
    <pre><code>Stack() {
    Text('这是一个文本')
    Image($rawfile('path/to/image.png'))
}</code></pre>

    <p><strong>Flex</strong> - 弹性布局容器。</p>
    <pre><code>Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
    Text('Left')
    Text('Right')
}</code></pre>
  </div>
</template>

<style scoped>
.body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
h2,
h3 {
  color: #333;
}
code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 4px;
}
pre {
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  overflow: auto;
}
</style>
